import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import './index.less';

const provinces = ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'];
const letters = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'];
const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

const LicensePlateKeyboard = ({ value = '', onChange, onClose }) => {
  // 根据当前输入位置判断显示哪种键盘
  const [currentPosition, setCurrentPosition] = useState(0);

  useEffect(() => {
    setCurrentPosition(value.length);
  }, [value]);

  const handleClick = (char) => {
    if (value.length < 8) {
      onChange(value + char);
    }
  };

  const handleDelete = (e) => {
    e.stopPropagation();
    if (value.length > 0) {
      onChange(value.slice(0, -1));
    }
  };

  return (
    <View className='license-keyboard'>
      <View className='keyboard-header'>
        <Text className='plate-preview'>{value || '请输入车牌号'}</Text>
        <Text className='close-btn' onClick={onClose}>完成</Text>
      </View>
      <View className='keyboard-body'>
        {currentPosition === 0 ? (
          <View className='key-row'>
            {provinces.map((province) => (
              <Text
                key={province}
                className='key-item'
                onClick={(e) => {e.stopPropagation(); handleClick(province)}}
              >
                {province}
              </Text>
            ))}
          </View>
        ) : (
          <>
            <View className='key-row'>
              {numbers.map((number) => (
                  <Text
                      key={number}
                      className='key-item'
                      onClick={(e) => {e.stopPropagation(); handleClick(number)}}
                  >
                    {number}
                  </Text>
              ))}
            </View>
            <View className='key-row'>
              {letters.slice(0, 8).map((letter) => (
                <Text
                  key={letter}
                  className='key-item'
                  onClick={() => handleClick(letter)}
                >
                  {letter}
                </Text>
              ))}
            </View>
            <View className='key-row'>
              {letters.slice(8, 17).map((letter) => (
                <Text
                  key={letter}
                  className='key-item'
                  onClick={(e) => {e.stopPropagation(); handleClick(letter)}}
                >
                  {letter}
                </Text>
              ))}
            </View>
            <View className='key-row'>
              {letters.slice(17).map((letter) => (
                <Text
                  key={letter}
                  className='key-item'
                  onClick={(e) => {e.stopPropagation(); handleClick(letter)}}
                >
                  {letter}
                </Text>
              ))}
              <Text className='key-item key-delete' onClick={handleDelete}>删除</Text>
            </View>
          </>
        )}
      </View>
    </View>
  );
};

export default LicensePlateKeyboard;
